<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生考勤统计</title>
      <!-- 引入jQuery -->
      <script src="/static/jquery/jquery.min.js"></script>
      <!-- Bootstrap CSS -->
      <link href="/static/bootstrap/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Vue.js -->
    <script src="/static/vue/vue.min.js"></script>
    <!-- 引入 Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app" class="container mt-5">
        <h1 class="mb-4">学生考勤统计</h1>
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <th>学生姓名</th>
                    <th>早上缺席次数</th>
                    <th>早操缺席次数</th>
                    <th>放学缺席次数</th>
                    <th>手机未交次数</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="student in students" :key="student.stu_name">
                    <td>{{ student.name }}</td>
                    <td>{{ student.morning_absent_times }}</td>
                    <td>{{ student.exercise_absent_times }}</td>
                    <td>{{ student.school_over_absent_times }}</td>
                    <td>{{ student.phone_absent_times }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                students: [] // 用于存储从后端获取的数据
            },
            mounted() {
                // 页面加载时，从后端获取数据
                this.fetchData();
            },
            methods: {
                fetchData() {
                    console.log('正在获取数据');
                    // 发送 GET 请求到后端 API
                    axios.get('http://localhost:5000/api/attendance-summary')
                    .then(response => {
                            this.students = response.data;
                        })
                        .catch(error => {
                            console.error('Error fetching attendance data:', error);
                        });
                }
            }
        });
    </script>
</body>
</html>